<template>
 <h2>reactive 和ref细节问题</h2>
 <h3>m1:{{m1}}</h3>
 <h3>m2:{{m2}}</h3>
 <h3>m3:{{m3}}</h3>
 <button @click="update">更新数据</button>
</template>

<script>
import {defineComponent,ref,reactive} from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    const m1 = ref('abc')
    const m2 = reactive({
      name:'xiaoming',
      wife:{
        name:'hong'
      }
    })
    const m3 = ref({
      name:'ming',
      wife:{
        name:'xiaohong'
      }
    })
    const update=()=>{
      m1.value += '==='
      m2.wife.name+='==='
      // m3.value.name +='===='
      m3.value.wife.name+='==='
      console.log(m3.value.wife);
    }
    return {
      m1,
      m2,
      m3,
      update
    }
  }
})
</script>

<style lang="less" scoped>

</style>
